<template>
    <div class="top">
        <div class="puppet" :style="top">
            <div class="header">
                <!-- logo -->
                <div class="logo">
                    <img src="../assets/images/logo.png" alt="">
                </div>
                <!-- 导航 -->
                <ul>
                    <li 
                        v-for="(item,index) in navList" 
                        :key="index">
                        <a href="#" 
                            :class="{select: num == index}"
                            @click="select(index)"
                            >{{item}}
                        </a>
                     </li>
                </ul>
                <!-- 搜索框 -->
                <label class="search">
                    <div class="search_l" :style="type" type="text">
                        <input @click="input" @blur="lose" placeholder="搜索你感兴趣的内容…">
                        <button :style="one" class="magnifyingGlass"><i class="iconfont icon-BAI-fangdajing"></i></button>
                    </div>
                    <div class="search_r">
                        <button :style="show">提问</button>
                    </div>
                </label>
                <!-- 用户信息 -->
                <div class="userInfo">
                    <div>
                        <img src="../assets/images/message.png" alt="">
                        <span>消息</span>
                    </div>
                    <div>
                        <img src="../assets/images/message.png" alt="">
                        <span>私信</span>
                    </div>
                    <div>
                        <img src="../assets/images/message.png" alt="">
                        <span>创作中心</span>
                    </div>
                    <div>
                        <img src="../assets/images/headPicture.png" alt="">
                    </div>
                </div>
            </div>
            <div class="two">
                <div class="zhongzhong">
                    <div class="logo">
                        <img src="../assets/images/logo.png" alt="">
                    </div>
                    <ul class="nav">
                        <li>关注</li>
                        <li>推荐</li>
                        <li>热榜</li>
                        <li>视频</li>
                    </ul>
                </div>
                <div class="nameless">
                    <div class="nameless-left">
                        <input type="text" placeholder="搜索你感兴趣的内容…">
                        <button><img src="../assets/images/search.png" alt=""></button>
                    </div>
                    <button class="nameless-right">提问</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Top',
        data() {
            return {
                num: 0,
                navList: ['首页','知学堂','会员','发现','等你来答',],
                top: {
                    top: 0
                },
                show: {
                    display: 'block',
                },
                type: {
                    backgroundColor: undefined,
                    border: undefined,
                },
                one: {
                    color: '#8590a6',
                    fontWeight: undefined
                }
            }
        },
        methods: {
            scrollDs() {
                const scroll = document.documentElement.scrollTop
                if(scroll >= 100) {
                    console.log(this.top.top = -52 + 'px')
                }else {
                    console.log(this.top.top = 0)
                }
            },
            select(index) {
                this.num = index
            },
            input() {
                this.show.display = 'none'
                this.type.backgroundColor = '#fff'
                this.type.border = '1px solid #121212'
                this.one.color = '#056de8'
                this.one.fontWeight = '600'
            },
            lose() {
                this.show.display = 'block'
                this.type.backgroundColor = '#f6f6f6'
                this.one.color = '#8590a6'
                this.one.fontWeight = '300'
                this.type.border = '1px solid #f3f3f3'
            }
        },
        mounted() {
            window.addEventListener('scroll', this.scrollDs , true)
        }
    }
</script>

<style scoped>
    .top {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 52px;
        background-color: white;
        z-index: 999;
        color: #8590a6;
        box-shadow: 0 0 2px #8590a6;
        overflow: hidden;
    }
    .puppet {
        position: relative;
        top: 0;
        min-width: 1000px;
        max-width: 1227px;
        margin: 0 auto;
        height: 104px;
        background-color: white;
        transition: .3s;
    }
    .header {
        display: flex;
        height: 52px;
        align-items: center;
        min-width: 1000px;
        max-width: 1227px;
        margin: 0 auto;
        width: 100%;
    }
    .logo {
        margin: 0 12.5px;
        width: 64px;
        height: 52px;
        background-color: blue;
    }
    .logo img {
        width: 100%;
        height: 100%;
    }
    .header ul {
        display: flex;
        height: 50px;
        line-height: 51px;
        margin-left: 25px;
        margin: 0 16px;
        font-size: 15px;
        flex-shrink: 0;
    }
    .header ul li {
        padding: 0 15px;
    }
    .search {
        display: flex;
        justify-content: space-between;
        height: 34px;
        width: 473px;
        min-width: 317px;
    }
    .search .search_l {
        display: flex;
        justify-content: space-between;
        width: 100%;
        min-width: 235px;
        border-radius: 50px;
        background-color: #f6f6f6;
        border: 1px solid #f3f3f3;
    }
    .search .search_l input {
        width: 100%;
        outline: none;
        font-size: 14px;
        border: none;
        background-color: transparent;
        padding: 4px 0 4px 16px;
        border-radius: 50px;
        border-radius: 50px 0 0 50px;
    }
    ::-webkit-input-placeholder { 
        /* WebKit browsers，webkit内核浏览器 */
        color: #8590a6; 
    } 
    .search .search_l button {
        display: block;
        width: 43.6px;
        height: 100%;
        line-height: 35px;
        margin-left: 12px;
        padding: 0 12px;
        border: none;
        cursor: pointer;
        background-color: transparent;
        border-radius: 0 50px 50px 0;
    }
    .search .search_r button {
        margin-left: 12px;
        width: 70px;
        height: 34px;
        line-height: 36px;
        border: none;
        cursor: pointer;
        color: #fff;
        font-size: 14px;
        border-radius: 50px;
        background-color: #056de8;
    }
    .userInfo {
        display: flex;
        justify-content: space-between;
        width: 204px;
        height: 34px;
        margin-left: 30px;
    }
    .userInfo div {
        display: flex;
        font-size: 12px;
        cursor: pointer;
        padding-top: 2px;
        flex-direction: column;
    }
    .userInfo div:nth-child(3) {
        margin-right: 15px;
    }
    .userInfo div img {
        width: 18px;
        height: 18px;
        margin-left: 2px;
    }
    .userInfo div:nth-child(3) img {
        margin-left: 13px;
    }
    .userInfo div:nth-child(1), .userInfo div:nth-child(2){
        width: 35px;
    }
    .userInfo div:nth-last-child(1) {
        width: 30px;
        height: 30px;
    }
    .userInfo div:nth-last-child(1) img {
        width: 100%;
        height: 30px;
    }
    .userInfo div span {
        margin-top: -1px;
    }
    .select {
        display: block;
        color: #121212;
        font-weight: 700;
        height: 51px;
        border-bottom: 4px solid #056DE8;
    }
    a {
        color: #8590a6;
    }
    a:hover {
        color: #444;
    }
    .headerTwo {
        margin: 0 33.4px;
        padding: 0 16px;
    }
    .two {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 1202px;
        height: 52px;
        margin: 0 auto;
    }
    .two .zhongzhong {
        display: flex;
        align-items: center;
    }
    .two .nav {
        display: flex;
        padding-left: 18px;
    }
    .two .nav li {
        margin: 0 22px;
    }
    .nameless {
        display: flex;
        justify-content: space-between;
        width: 381px;
        height: 34px;
    }
    .nameless-left {
        display: flex;
        flex: 1;
    }
    .nameless-left input {
        flex: 1;
    }
    .nameless-left input {
        height: 100%;
        border: none;
        outline: none;
        border-radius:99px 0 0 99px;
        padding: 4px 0 4px 16px;
        background-color: #F6F6F6;
    }
    .nameless-left button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 43.6px;
        height: 100%;
        padding: 0 12px;
        background-color: #F6F6F6;
        border-radius: 0 99px 99px 0;
    }
    .nameless .nameless-right {
        width: 70px;
        height: 33.6px;
        background-color: #056de8;
        border-radius: 999px;
        margin-left: 12px;
        color: #fff;
        padding: 0 14px;
    }
    .nameless-left button img {
        width: 16px;
        height: 16px;
    }
</style>